<!DOCTYPE html>
<html>
  <head>
    <title>registration and validation</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript" src="../javascript/lib/jquery-1.9.1/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//dom元素加载完成之后，首先添加的行为是检验各个输入的字段
			$("input[name='validate']").click(function(){
				//清除msg消息
				$("#msg").html("");
				
				//获取各个输入框的值
				var userName = $("input[name='userName']").val();
				var email = $("input[name='email']").val();
				var password = $("input[name='password']").val();
				var chkPassword = $("input[name='chkPassword']").val();
				
				//不允许出现空值
				var hasValue = userName && email && password && chkPassword ;
				if(!hasValue){
					$("#msg").append("All fields are required.").css("color" , "red");
					return false;
				}
				
				//检验两次输入密码是否完全相同
				var passwordMatch = false;
				if(password === chkPassword){
					passwordMatch = true;
				}
				if(!passwordMatch){
					$("#msg").append("<p>Passwords don's match.</p>").css("color" , "red");
					return false;
				}
				
			});
			
			//添加下拉框
			$("input[name='addLocation']").click(function(){
				$("body").append("<select name='provincesCombo'>" + "<option>Select Province</option>" + "</select>");
				//禁用Add Location按钮，避免重复点击
				$(this).attr("disabled" , "disabled");
				
				var provinces = ["山西" , "山东" , "河南"];
				$.each(provinces , function(index , value){
					$("[name='provincesCombo']").append("<option value='" + index + "'>" + value + "</option>");
				});
				
				$("body").append("<select name='citysCombo'>" + "<option>Select City</option>" + "</select>");
			});
			
			//把$(document)替换为$("body")也可以
			//jQuery1.9使用on代替live
			$(document).on("change" , "select[name='provincesCombo']" , function(event){
				var provinceValue = $(this).val();
				var sxcitys = ["太原" , "运城" , "大同"];
				var sdcitys = ["济南" , "青岛" , "淄博" , "菏泽"];
				var hncitys = ["郑州" , "洛阳"];
				var citys = [];
				if(provinceValue == 0){
					citys = $.extend([] , sxcitys);
				}else if(provinceValue == 1){
					citys = $.extend([] , sdcitys);
				}else if(provinceValue == 2){
					citys = $.extend([] , hncitys);
				}
				//清空citysCombo中任意之前的值
				$("[name='citysCombo']").empty();
				$.each(citys , function(index , value){
					$("[name='citysCombo']").append("<option value='" + index + "'>" + value + "</option>");
				});
			});
		})
	</script>
  </head>
  
  <body>
    <div id="msg"></div>
    <form name="userRegistrationForm">
    	<lable for="username" >User</lable><input type="text" name="userName"></br>
    	<label for="email">Email</label><input type="text" name="email"></br>
    	<label for="password">Password</label><input type="text" name="password"></br>
    	<label for="chkPassword">Re-enter Password</label><input type="text" name="chkPassword"></br>
    	<input type="button" name="validate" value="Validate Inputs">
    </form>
    <input type="button" name="addLocation" value="Add Location" />
  </body>
</html>
